<template>
    <el-container>
        <el-aside :width="menuCollapse ? '65px' : '200px'" ref='aside'>
            <aside-menu :is-develop="isDevelop" :menu='menu' v-if="menu.length"></aside-menu>
        </el-aside>
        <el-container>
            <el-header class="s-b" height='50px'>
                <i class="el-icon-s-fold toggle-open-icon" @click='toggleMenuCollapse'></i>
                <el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						{{managerName}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command='changePwd'>修改密码</el-dropdown-item>
						<el-dropdown-item command='logout'>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
            </el-header>
            <el-main>
                <el-card class="el-main-card">
                    <router-view></router-view>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import asideMenu from '@c/AsideMenu'
    import {TOKEN_KEY} from '@/libs/constant'
    export default {
        components : {
            asideMenu
        },
        data () {
            return {
                isDevelop : 0,
                managerName : '管理员',
                menu : []
            }
        },
        computed : {
            menuCollapse () {
                return this.$store.getters.menuCollapse
            }
        },
        created () {
            this.getSystemUserInfo();

        },
        methods : {
            getSystemUserInfo () {
                this.__api.system.getUserInfo().then(res => {
                    this.isDevelop = res.is_develop;
                    this.managerName = res.manager_name;
                    this.menu = res.is_develop == 1 ? [
					{
						id : 999,
						title : '开发设置',
						router : '/develop-setting',
						children : [
                                {
                                    id : 10001,
                                    title : '菜单管理',
                                    router : '/menu'
                                },{
                                    id : 10002,
                                    title : '字典管理',
                                    router : '/dictionary'
                                }
                            ]
                        },  ...res.menu,
                        // {
                        // 	id : 1000,
                        // 	title : '应用市场',
                        // 	router : '/market'
                        // },
                    ] : [
                        ...res.menu,
                        // {
                        // 	id : 1000,
                        // 	title : '应用市场',
                        // 	router : '/market'
                        // },
                    ];
                })
            },
            handleCommand (command) {
				switch (command) {
					case 'changePwd':
						this.$router.push('/change-pwd');
					break;
					case 'logout' : 
						localStorage.removeItem(TOKEN_KEY);
						this.$router.replace('/login');
					break;
				}
			},
            toggleMenuCollapse () {
                this.$store.commit('toggleMenuCollapse')
            }
        }
    }
</script>

<style lang='less'>
    .el-header {
        background: #fff;
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
    }
    .toggle-open-icon {
        cursor: pointer;
    }
    .el-main {
        padding: 10px 5px;
        box-sizing: border-box;
        height: calc(~"100vh - 80px");
        overflow-y: scroll;
    }
    .el-main-card {
        .el-card__body {
            padding: 10px;
        }
    }
</style>